<template>
  <div class="container home">
    <div class="search-bar search-bar-home">
      <div class="search" @click="subSearch">
        <van-icon name="search" color="#fff" size="14px" />
        <span>搜索商品/店铺</span>
      </div>
    </div>
    <div class="banner" v-if="homeIndex!=null">
      <swiper class="banner-swiper" :indicator-dots="indicatorDots" indicator-color="rgba(255,255,255,1)"
        indicator-active-color="rgba(238,117,89,1)" :autoplay="autoplay" :interval="interval" :duration="duration">
        <block v-for="(item,index) in homeIndex.ad_list" :key="index">
          <swiper-item>
            <image :src="item.url" class="banner-pic" mode="scaleToFill" />
          </swiper-item>
        </block>
      </swiper>
    </div>
    <!-- <div @click="$router.push({ path: '/pages/productInfo/productInfo',query: { goods_id: '7' } })">2222222</div> -->
    <div class="home-nav" v-if="homeIndex!=null">
      <div class="home-nav-item" v-for="(item,index) in homeIndex.navList" :key="index" @click="changeMallActive(index,1)">
        <div class="home-nav-pic"><img :src="item.icon" alt=""></div>
        <div class="home-nav-info">{{item.name}}</div>
      </div>
      <div class="home-nav-item" @click="$router.push({ path: '/pages/integralMall/integralMall'})">
        <div class="home-nav-pic"><img src="../../../static/images/icon-nav-10.png" alt=""></div>
        <div class="home-nav-info">积分商城</div>
      </div>
    </div>
    <div class="home-notice" v-if="homeIndex!=null">
      <div class="home-notice-icon">
        <img src="../../../static/images/icon-tongzhi.png" alt="">
      </div>
      <div class="home-notice-info">{{homeIndex.noticeList[0].title}}</div>
    </div>
    <div class="home-recommended">
      <div class="title">推荐商家</div>
      <div class="home-recommended-content scroll-view-x" v-if="homeIndex!=null">
        <div class="home-recommended-item" v-for="(item, index) in homeIndex.recommend_stores" :key="index" @click="$router.push({ path: '/pages/storeInfo/storeInfo', query: { cate_id: item.id||item.store_id } }) ">
          <img :src="item.store_logo" alt="">
        </div>
      </div>
    </div>
    <div class="home-fine-goods" v-if="homeIndex!=null">
      <div class="home-fine-goods-title">
        <span>为你</span>
        <span>精选</span>
      </div>
      <div class="home-fine-goods-item" v-for="(item,index) in homeIndex.fine_goods" :key="index" @click="$router.push({ path: '/pages/productInfo/productInfo', query: { goods_id: item.goods_id } }) ">
        <p>{{item.goods_name}}</p>
        <p>{{item.shop_price}}</p>
        <img :src="item.goods_logo" alt="">
      </div>
    </div>
    <div class="home-nearby-stores">
      <div class="home-nearby-stores-header">
        <div class="tabs">
          <div class="tab" @click="changeStoresType('nearby')" :class="{active:storesType=='nearby'}">附近的店</div>
          <div class="tab" @click="changeStoresType('hot')" :class="{active:storesType=='hot'}">热卖排行</div>
        </div>
        <div class="location-info">
          <img src="../../../static/images/icon-location.png" alt="">
          <span class="location-name">
            <span v-if="locationInfo==null">加载中</span>
            <span v-if="locationInfo!=null">{{locationInfo.addressComponent.street}}</span>
          </span>
          <van-icon name="arrow" color="#808080" size="10px" />
        </div>
      </div>
      <div class="home-nearby-stores-content" v-if="storesType=='nearby'&& homeIndex!=null">
        <m-store v-for="(item,index) in homeIndex.nearby_stores" :key="index" :data="item"></m-store>
      </div>
      <div class="home-nearby-stores-content" v-if="storesType=='hot'&& homeIndex!=null">
        <m-store v-for="(item,index) in homeIndex.hot_stores" :key="index" :data="item"></m-store>
      </div>
    </div>
    <i-toast id="toast" />
  </div>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from "Vuex";
  // 依赖
  // 依赖
  const {
    $Toast
  } = require("@/../static/iview/base/index");
  import productModule from "@/components/productModule";
  import MStore from "@/components/store";
  import request from "@/api/request";
  import {
    getLocation,
    cancelCollect,
    getIndexIndex,
    getMallCollect
  } from "@/utils/index";
  export default {
    components: {
      MStore
    },
    data() {
      return {
        storesType: 'nearby',
        indicatorDots: true,
        autoplay: true,
        interval: 5000,
        duration: 300,
        play: false
      };
    },
    computed: {
      ...mapState(["homeIndex", "locationInfo"])
    },
    methods: {
      ...mapMutations(["setHomeIndex", "changeHomeActive", "setMallActive"]),
      changeStoresType(val) {
        this.storesType = val;
      },
      changeMallActive(val, item) {
        this.setMallActive(val);
        this.changeHomeActive(item);
      },
      subSearch() {
        this.$router.push({
          path: '/pages/search/search',
        })
      },
    },
    // // 下拉刷新方法，与methods方法同级
    // async onPullDownRefresh() {
    //   // to doing..
    //   // 停止下拉刷新
    //   console.log("开始刷新")
    //   await this.getIndexIndex()
    //   wx.stopPullDownRefresh();
    // },
    // // 上拉加载，拉到底部触发
    // onReachBottom() {
    //   // 到这底部在这里需要做什么事情
    //   // this.loadMore();
    // },
    mounted() {
      this.cancelCollect = cancelCollect;
      this.getMallCollect = getMallCollect;
      this.getIndexIndex = getIndexIndex;
      this.getIndexIndex();
      console.log(this)
    },
    watch: {
      homeIndex() {
        console.log(this.homeIndex != null);
        console.log(this.homeIndex);
      }
    }
  };

</script>

<style lang="less">
  .home {}

  .banner {
    font-size: 0;
    width: 100%;
    background: #ccc;
    position: relative;
    height: 150px;

    image {
      width: 100%;
      height: 150px;
    }

    .banner-pic {
      width: 100%;
      height: 150px;
      background: #F9F9F9;
    }
  }

  .home-nav {
    display: flex;
    flex-wrap: wrap;
    padding-top: 15px;
    background: #fff;

    .home-nav-item {
      flex: 0 20%;
      width: 20%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      margin-bottom: 15px;

      .home-nav-pic {
        width: 55px;
        height: 55px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .home-nav-info {
        font-size: 12px;
        color: rgba(128, 128, 128, 1);
        line-height: 1em;
        margin-top: -5px;
      }
    }
  }

  .home-notice {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    margin: 10px 0;
    background: #fff;

    .home-notice-icon {
      width: 46px;
      height: 23px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .home-notice-info {
      margin-left: 10px;
      flex: 1;
      font-size: 14px;
      color: rgba(96, 96, 96, 1);
    }
  }

  .home-recommended {
    background: #fff;

    .title {
      font-size: 14px;
      color: rgba(238, 117, 89, 1);
      line-height: 18px;
      padding: 15px 15px 0;
      text-align: center;
    }

    .home-recommended-content {
      padding: 15px 0 15px 15px;
      width: 100%;
      white-space: nowrap;
    }

    .home-recommended-item {
      width: 130px;
      flex: 0 130px;
      height: 80px;
      margin-right: 15px;
      display: inline-block;
      border-radius: 5px;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }

  .home-fine-goods {
    display: flex;
    flex-wrap: wrap;
    background: #fff;

    .home-fine-goods-title {
      flex: 0 25%;
      width: 25%;
      height: 125px;
      background: #f9f9f9;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      span {
        font-size: 14px;
        color: rgba(51, 51, 51, 1);
        line-height: 18px;
      }
    }

    .home-fine-goods-item {
      border-left: 1px solid #f9f9f9;
      border-bottom: 1px solid #f9f9f9;
      flex: 0 25%;
      width: 25%;
      height: 124px;
      padding: 10px 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .name {
        font-size: 14px;
        font-family: PingFang-SC-Regular;
        color: rgba(51, 51, 51, 1);
        line-height: 1em;
        margin-bottom: 5px;
      }

      .price {
        font-size: 12px;
        font-family: PingFang-SC-Regular;
        color: rgba(160, 160, 160, 1);
        line-height: 1em;
        margin-bottom: 10px;
      }

      img {
        width: 73px;
        height: 73px;
      }
    }
  }

  .scroll-view-x {
    overflow-x: auto;
  }

  .home-nearby-stores {
    margin-top: 10px;

    .home-nearby-stores-header {
      display: flex;
      padding: 13px 0;
      background: #fff;

      .tabs {
        width: 233px;
      }

      .location-info {
        border-left: 1px solid #e8e8e8;
        flex: 1;
        display: flex;
        align-items: center;
        padding: 0 15px;
        font-size: 0;

        img {
          width: 12px;
          height: 15px;
          margin-right: 8px;
        }

        .location-name {
          flex: 1;
          font-size: 12px;
          color: rgba(128, 128, 128, 1);
          line-height: 18px;
        }

        ._van-icon {
          font-size: 10px;
        }
      }
    }
  }

  .home-nearby-stores-content {
    .store {
      margin-bottom: 10px;
    }
  }

  .search-bar-home {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    padding: 8px 15px;
    z-index: 99;
    background: none;

    .search {
      display: flex;
      border-radius: 15rpx;
      padding: 0;
      background: rgba(255, 255, 255, .4);
      padding: 0 15px;
      border-radius: 15px;
      overflow: hidden;
      align-items: center;
      font-size: 0;

      span {
        display: block;
        flex: 1;
        height: 30px;
        font-size: 12px;
        line-height: 30px;
        color: #fff;
        text-align: left;
        margin-left: 10px;

        &::placeholder {
          color: #fff;
        }
      }
    }

  }

</style>
